<template>
  <div>
    <div class="wolf-search-start">
      起点：<input class="search-input" v-on:input="getStartRegionByKeyword" v-model="startRegion"/>
    </div>

    <div class="wolf-search-end">
      终点：<input class="search-input" v-on:input="getEndRegionByKeyword" v-model="endRegion"/>
    </div>

    <div class="location-type-list">
      <div class="location-type-one" :class="locationTypeIndex===0?'active':''"
           @click="setLocationTypeIndex(0)">驾车
      </div>
      <div class="location-type-one" :class="locationTypeIndex===1?'active':''"
           @click="setLocationTypeIndex(1)">骑车
      </div>
      <div class="location-type-one" :class="locationTypeIndex===2?'active':''"
           @click="setLocationTypeIndex(2)">步行
      </div>
    </div>

    <div class="start-location-planning"
         @click="locationSearch"
         :class="this.startRegionLocation!=null&&this.endRegionLocation!=null?'start-location-planning-active':''">
      开始导航
    </div>

    <div class="search-suggestion">
      <div class="suggestion-one" v-for="(region) of searchRegionList" :key="region.uid">
        <div class="address-info" @click="localPositionByLocation(region)">
          <div class="name">{{ region.name }}</div>
          <div class="address">{{ region.address }}</div>
        </div>
        <i class="iconfont icon-dingwei suggestion-icon"></i>
      </div>
    </div>

  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "Navigation",
  data() {
    return {
      startRegion: "",
      endRegion: "",
      startRegionLocation: null,
      endRegionLocation: null,
      inputFlag: false,
      locationTypeIndex: 0
    }
  },
  methods: {
    ...mapActions(["selectRegionByKeyword", "clearRegionByKeyword"]),
    getStartRegionByKeyword() {
      this.inputFlag = true
      this.getRegionByKeyword(this.startRegion)
    },
    getEndRegionByKeyword() {
      this.inputFlag = false
      this.getRegionByKeyword(this.endRegion)
    },
    getRegionByKeyword(keyword) {
      this.selectRegionByKeyword({
        query: keyword,
        tag: "",
        region: this.geolocation.geolocationInfo.address.city
      })
    },
    localPositionByLocation(region) {
      if (this.inputFlag) {
        this.startRegion = region.name
        this.startRegionLocation = region
      } else {
        this.endRegion = region.name
        this.endRegionLocation = region
      }
      this.clearRegionByKeyword()
      // 用经纬度设置地图中心点
      this.map.clearOverlays();
      let new_point = new BMapGL.Point(region.location.lng, region.location.lat);
      // 创建标注
      let marker = new BMapGL.Marker(new_point);
      // 将标注添加到地图中
      this.map.addOverlay(marker);
      this.map.panTo(new_point);
    },
    locationSearch() {
      if (this.startRegionLocation == null) {
        alert("请输入起点...")
        return
      }
      if (this.endRegionLocation == null) {
        alert("请输入终点...")
        return
      }
      this.map.clearOverlays();
      let p1 = new BMapGL.Point(this.startRegionLocation.location.lng, this.startRegionLocation.location.lat);
      let p2 = new BMapGL.Point(this.endRegionLocation.location.lng, this.endRegionLocation.location.lat);
      let search
      switch (this.locationTypeIndex) {
        case 0:
          search = new BMapGL.DrivingRoute(this.map, {
            renderOptions: {
              map: this.map,
              autoViewport: true
            }
          });
          break
        case 1:
          search = new BMapGL.RidingRoute(this.map, {
            renderOptions: {
              map: this.map,
              autoViewport: true
            }
          });
          break
        case 2:
          search = new BMapGL.WalkingRoute(this.map, {
            renderOptions: {
              map: this.map,
              autoViewport: true
            }
          });
          break
        default:
          return;
      }
      search.search(p1, p2);
    },
    setLocationTypeIndex(index) {
      this.locationTypeIndex = index
      this.locationSearch()
    }
  },
  computed: {
    ...mapState(["searchRegionList", "map", "geolocation"])
  },
  destroyed() {
    this.map.clearOverlays();
    this.clearRegionByKeyword()
  }
}
</script>

<style scoped lang="less">
.wolf-search-start {
  width: 97%;
  height: auto;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  position: fixed;
  z-index: 999;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  color: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;

  .search-input {
    flex-grow: 1;
    height: 45px;
    font-size: 14px;
    border-bottom: 0.5px solid rgba(235, 235, 235);
  }

}

.wolf-search-end {
  width: 97%;
  height: auto;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  position: fixed;
  z-index: 999;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  font-size: 12px;
  color: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;

  .search-input {
    flex-grow: 1;
    font-size: 14px;
    height: 45px;
    box-sizing: border-box;
    border-top: 0.5px solid rgba(235, 235, 235);
  }

}

.location-type-list {
  width: 97%;
  height: 25px;
  left: 50%;
  top: 115px;
  transform: translateX(-50%);
  position: fixed;
  z-index: 999;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 5px;
  font-size: 14px;
  color: rgba(0, 0, 0, .6);
  overflow: hidden;

  .location-type-one {
    width: 33.3%;
    height: 100%;
    text-align: center;
    line-height: 25px;
  }

  .active {
    color: white;
    background-color: rgb(97, 208, 144);
  }

}

.start-location-planning {
  width: 97%;
  height: 35px;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  position: fixed;
  z-index: 999;
  background-color: rgb(211, 212, 215);

  border-radius: 10px;
  text-align: center;
  line-height: 35px;
  color: white;
}

.start-location-planning-active {
  background-color: rgb(66, 184, 131);
}

.search-suggestion {
  position: absolute;
  width: 97%;
  height: auto;
  z-index: 999;
  top: 195px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  overflow: hidden;
  background-color: white;

  .suggestion-one {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .address-info {
      padding: 5px 0;
      display: flex;
      align-content: center;
      flex-flow: column;
      font-size: 12px;
      width: 95%;

      .name {
        color: black;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 85%;
      }

      .address {
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(100, 100, 100);
        max-width: 85%;
      }
    }

  }
}

</style>